<!--
 * @Description: 表单
 * @Author: DHL
 * @Date: 2021-12-24 17:24:41
 * @LastEditors: DHL
 * @LastEditTime: 2022-08-25 09:21:10
-->
<template>
  <div class="code-gen-wrapper">
    <el-tabs
      v-model="state.activeTabsName"
      type="border-card"
      class="code-gen-tabs"
      @tab-click="handleTabClick"
    >
      <el-tab-pane label="表信息" name="tableTab">
        <el-form label-width="90px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="表名 / 表注释" prop="tableName">
                <el-input
                  v-model="state.tableSearchForm.queryLikeStr"
                  clearable
                  placeholder="请输入表名 / 表注释"
                  @change="handleSearchTables()"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          ref="tableRef"
          :data="state.tableData"
          border
          stripe
          height="calc(100vh - 215px)"
          @selection-change="handleTablesSelectionChange"
        >
          <el-table-column type="selection" width="40" />
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="tableName" label="表名" />
          <el-table-column prop="tableComment" label="表注释" />
          <el-table-column prop="tableType" label="表类别" />
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="字段信息" name="columnTab">
        <el-table :data="state.columnData" stripe height="calc(100vh - 165px)">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="tableName" label="表名" show-overflow-tooltip min-width="100" />
          <el-table-column
            prop="tableComment"
            label="表注释"
            show-overflow-tooltip
            min-width="100"
          />
          <el-table-column prop="columnName" label="列名称" show-overflow-tooltip min-width="100" />
          <el-table-column
            prop="columnComment"
            label="列注释"
            show-overflow-tooltip
            min-width="100"
          />
          <el-table-column
            prop="columnType"
            label="物理类型"
            show-overflow-tooltip
            min-width="100"
          />
          <el-table-column prop="javaType" label="Java类型" min-width="120">
            <template #default="scope">
              <el-select v-model="scope.row.javaType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in state.javaType"
                  :key="`javaType_${index}`"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="javaField" label="Java属性" min-width="120">
            <template #default="scope">
              <el-input
                v-model="scope.row.javaField"
                placeholder="请选择输入"
                :class="`${scope.row.repeatJavaField ? 'repeat-java-field' : ''}`"
                @change="handleJavaFieldChange"
              />
            </template>
          </el-table-column>
          <el-table-column prop="javaComment" label="Java注释" min-width="150">
            <template #default="scope">
              <el-input v-model="scope.row.javaComment" placeholder="请选择输入" />
            </template>
          </el-table-column>
          <el-table-column prop="javaBean" label="Java Bean" width="50px">
            <template #default="scope">
              <el-checkbox v-model="scope.row.javaBean"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="form" label="表单" width="50px">
            <template #default="scope">
              <el-checkbox v-model="scope.row.form"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="list" label="列表" width="50px">
            <template #default="scope">
              <el-checkbox v-model="scope.row.list"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="query" label="查询条件" width="50px">
            <template #default="scope">
              <el-checkbox v-model="scope.row.query"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="queryWay" label="查询方式" width="120px">
            <template #default="scope">
              <el-select v-model="scope.row.queryWay" placeholder="请选择">
                <el-option
                  v-for="(item, index) in state.queryWay"
                  :key="`queryWay_${index}`"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="required" label="必填" width="50px">
            <template #default="scope">
              <el-checkbox v-model="scope.row.required"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="componentType" label="组件类型" width="120">
            <template #default="scope">
              <el-select v-model="scope.row.componentType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in state.componentType"
                  :key="`componentType_${index}`"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="dataDic" label="字典" min-width="120">
            <template #default="scope">
              <el-select
                v-model="scope.row.dataDic"
                filterable
                allow-create
                default-first-option
                clearable
                placeholder="请选择"
                @change="handleDataDicChange(scope.row)"
              >
                <el-option
                  v-for="(item, index) in state.dataDic"
                  :key="`dataDic_${index}`"
                  :label="`${item.name} [ ${item.value} ]`"
                  :value="item.value"
                >
                  <span style="float: left; margin-right: 5px">{{ item.name }}</span>
                  <span
                    style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
                  >
                    {{ item.value }}
                  </span>
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="生成信息" name="optionsTab">
        <el-alert type="error" :closable="false" class="instruction">
          <div
            v-for="(item, index) in optionsJson.tables"
            :key="`optionsJsonTables_${item.tableName}`"
          >
            <span class="table-name">{{ item.tableName }}</span>
            <span class="table-comment">{{ item.tableComment }}</span>
          </div>
        </el-alert>
        <el-form
          ref="dbFormRef"
          :model="dbForm"
          :rules="rules"
          v-loading="loading"
          label-width="120px"
        >
          <el-row>
            <el-col :span="24">
              <el-divider content-position="left">Java</el-divider>
            </el-col>
            <el-col :span="24">
              <el-form-item label="删除前缀" prop="delPrefix">
                <el-input
                  v-model="dbForm.delPrefix"
                  clearable
                  placeholder="请输入删除前缀"
                  @change="handleChangeClassName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类名" prop="className">
                <el-input v-model="dbForm.className" clearable placeholder="请输入类名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="包名" prop="packageName">
                <el-input
                  v-model="dbForm.packageName"
                  clearable
                  placeholder="请输入包名"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-divider content-position="left">Vue</el-divider>
            </el-col>
            <el-col :span="12">
              <el-form-item label="前端页面路径" prop="viewPath">
                <el-input
                  v-model="dbForm.viewPath"
                  clearable
                  placeholder="请输入前端页面路径"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-divider content-position="left">其他配置</el-divider>
            </el-col>

            <el-col :span="12">
              <el-form-item label="所属项目" prop="projectId">
                <el-select
                  v-model="dbForm.projectId"
                  filterable
                  clearable
                  placeholder="请选择所属项目"
                  @change="handleSearchResourceTree"
                >
                  <el-option
                    v-for="(item, index) in state.projectList"
                    :key="`projectList_${item.id}`"
                    :label="`${item.name} [ ${item.id} ]`"
                    :value="item.id"
                  >
                    <span style="float: left; margin-right: 5px">{{ item.name }}</span>
                    <span
                      style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
                    >
                      {{ item.id }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="父级菜单" prop="resourceId">
                <el-popover placement="bottom" :width="200" trigger="click">
                  <el-input
                    v-model="state.treeFilterText"
                    clearable
                    @input="handletReeFilterText"
                    placeholder="请输入关键字"
                  />

                  <el-tree
                    ref="resourceTreeRef"
                    class="filter-tree"
                    :data="state.resourceTree"
                    check-on-click-node
                    :expand-on-click-node="false"
                    :filter-node-method="handleFilterResourceTreeNode"
                    @node-click="handleNodeClick"
                  />

                  <template #reference>
                    <el-input
                      v-model="dbForm.resourceName"
                      clearable
                      placeholder="请输入父级菜单"
                    ></el-input>
                  </template>
                </el-popover>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="作者" prop="genAuthor">
                <el-input v-model="dbForm.genAuthor" clearable placeholder="请输入作者"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="功能描述" prop="genName">
                <el-input
                  v-model="dbForm.genName"
                  clearable
                  placeholder="请输入功能描述"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="dbForm.remark" clearable placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="预览" name="previewCodeTab">
        <systemToolsCodeGenPreview ref="previewCodeRef"></systemToolsCodeGenPreview>
      </el-tab-pane>
    </el-tabs>

    <div class="code-gen-btns">
      <template v-if="state.activeTabsName == 'previewCodeTab'">
        <el-button type="warning" size="small" @click="handleDownloadZip">下载ZIP</el-button>
        <el-button type="success" size="small" @click="handleDownloadFile">下载文件</el-button>
      </template>

      <el-button type="primary" size="small" @click="handleSubmit(false)">提 交</el-button>
      <el-button size="small" @click="handleReset(true)">取 消</el-button>
    </div>
  </div>
</template>

<script src="./useForm.ts"></script>

<style scoped lang="scss">
  .code-gen-wrapper {
    height: 100%;
    :deep(.code-gen-tabs) {
      height: 100%;
      .el-tabs__content {
        height: calc(100% - 72px);
        .el-tab-pane {
          height: 100%;
        }
      }
    }

    .code-gen-btns {
      position: absolute;
      right: 50px;
      top: 98px;
    }
    .repeat-java-field {
      :deep(.el-input__inner) {
        color: red;
        font-weight: bold;
      }
    }

    .instruction {
      div {
        font-size: 20px;
        padding: 5px;
      }
      .table-comment {
        margin-left: 20px;
      }
    }

    .el-select {
      width: 100%;
    }
  }
</style>
